<template>
  <el-form-item label="商户类别：" v-if="!indexStore.is_general_agent">
    <el-select v-model="data.query.operated_id" placeholder="请选择" filterable @change="getSearchList">
      <el-option label="全部" :value="-1" />
      <el-option class="flexDetween" v-for="item in indexStore.operatorArray" :key="item.value" :label="'【' + item.value + '】' + item.label"
        :value="item.value">
        【{{ item.value }}】{{ item.label }}
        <el-tag size="small" :type="item.value==1?'success':item.type==1?'danger':'warning'" style="font-size:10px;">
          {{ item.value==1?'直营':item.type==1?'多货币':'正常总代' }}
        </el-tag>
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="商户：">
    <el-select v-model="data.query.agent_id" placeholder="请选择" filterable
      :disabled="data.query.operated_id == -1 && !indexStore.is_general_agent ? true : false">
      <el-option label="全部" :value="-1" />
      <el-option v-for="item in data.commercialArray" :key="item.value" :label="'【' + item.value + '】' + item.label"
        :value="item.value" v-show="!item.type || item.type && !selectToLabel(data.agentPathList,route.name)">
        <span v-if="!indexStore.is_general_agent">【{{ item.value }}】{{ item.label }}</span>
        <span v-else>
          【{{ item.value }}】{{ item.label }}
          ({{ selectToLabel(indexStore.currentArray, selectToLabel(indexStore.agentCurrency, item.value), 'type', 'value') }})
        </span>
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, computed, watch } from 'vue'
import { getCommercialTotal } from '@/api/common'
import { selectToLabel } from '@/utils/index'
import { useRoute } from 'vue-router'
const route = useRoute()
import { useStore } from '@/stores/index'
const indexStore = useStore()
export interface commercialType {
  value: number
  label: string
  type: number
}
export interface QueryType {
  agent_id: number
  operated_id: number
}

const data = reactive({
  query: {
    agent_id: -1,
    operated_id: -1
  },
  commercialArray: indexStore.is_general_agent ? indexStore.agentArray : indexStore.operatorArray,
  // 展示测试商户的页面
  agentPathList: [
    { label: '商户报表', value: 'merchantReport' },
    { label: '每日商户数据', value: 'merchantDaily' },
    { label: '投注留存', value: 'gameRemain' },
    { label: '首次投注留存', value: 'firstRemain' },
    { label: '游戏输赢', value: 'gameWinning' },
    { label: '排行榜', value: 'gameRank' },
    { label: '用户统计', value: 'userStatistics' },
    { label: '在线走势', value: 'onlineTrends' },
  ] 
})
const emit = defineEmits(['query'])
watch(
  () => data.query,
  (to) => {
    emit('query', { ...data.query })
  },
  { deep: true, immediate: true }
)

// 选择总代-查询总代下所有商户
const getSearchList = async (id: number) => {
  data.query.agent_id = -1
  let res = await getCommercialTotal({ operated_id: id })
  data.commercialArray = res.data as any
}

// 选择总代-查询总代下所有商户【默认选择第一个】
const getFirstSearchList = async () => {
  data.query.operated_id = indexStore.operatorArray[0].value
  let res = await getCommercialTotal({ operated_id: data.query.operated_id })
  data.commercialArray = res.data as any
  if(res.data.length){
    data.query.agent_id = res.data[0].value
  }else{
    data.query.agent_id = -1
  }
  return {...data.query}
}

// 重置
const onHideDetails = () => {
  data.query = {
    agent_id: -1,
    operated_id: -1
  }
}
defineExpose({
  onHideDetails,
  getFirstSearchList
})
</script>

<style lang="scss" scoped></style>
